<template>
  <div>
    <div class="dl-upload-content" v-if="showUrl">
      <el-image fit="contain" :src="showUrl" class="dl-upload-img"></el-image>
      <div class="dl-preview-action">
        <i class="el-icon-zoom-in" @click="dialogVisible = true" />
        <i class="el-icon-delete" @click="clickRemove" />
      </div>
      <el-dialog :visible.sync="dialogVisible" append-to-body>
        <img width="100%" :src="showUrl" alt="">
      </el-dialog>
    </div>

    <div v-else>
      <el-upload
        class="dl-upload-box"
        :action="action"
        :headers="formHeader"
        :data="formData"
        name="img"
        :show-file-list="false"
        :before-upload="beforeUpload"
        :on-success="handleSuccess">
        <i class="el-icon-plus dl-upload-icon"></i>
      </el-upload>
    </div>
    <p style="color:#888;margin:0" v-if="tip">{{tip}}</p>
  </div>
</template>

<script>
import { getToken } from '@/utils/token'
import md5 from 'js-md5'
import { endecrypt } from '@/utils/aes_endecrypt'

export default {
  name: 'UploadOne',
  props: {
    formData:{
      type: Object,
      default: {}
    },
    showUrl:{
      type: String,
      default: ''
    },
    tip:{
      type: String,
      default: ''
    },
  },
  data() {
    return {
      dialogVisible: false,
      action: process.env.VUE_APP_BASE_API + "common.upload/upload_one.html",
      formHeader: {
      	token: getToken(),
      	apiKey: process.env.VUE_APP_BASE_API_KEY,
      },
      /*formData: {
      	dir_type: "",//上传路径
        file_name: "",//上传文件名(固定)
        allow_type: "",//允许上传的文件后缀（多个逗号隔开）
        file_size: "",//允许上传文件大小
      },
      tip: '',//提示文字
      showUrl: '',//文件url*/
    }
  },
  methods: {
    //上传文件之前的钩子
    beforeUpload(file) {
      //formHeader 参数
      //请求时间戳
      let timeStamp = Math.round(new Date() /1000)
      this.formHeader.timeStamp = timeStamp
      this.formHeader.sign = md5(process.env.VUE_APP_BASE_API_KEY+process.env.VUE_APP_BASE_API_SECRET+timeStamp).toUpperCase()

      //判断上传类型?

      //判断文件大小
      /*const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;*/
    },
    // 图片上传成功
    handleSuccess(response, file) {
      //解密
      if(typeof(response.datas) == 'string'){
        response.datas = endecrypt(response.datas, true)
      }
      if (response.code == 200) {
        //this.showUrl = response.datas.img_root + response.datas.file_name;
        //文件大小 file.size
        this.$emit('uploadCallBack', {fileName: response.datas.file_name,showUrl: response.datas.img_root + response.datas.file_name,size: file.size});
      } else {
        this.$message(response.datas.error);
      }
    },
    // 图片删除
    clickRemove() {
    	//this.showUrl = '';
      this.$emit('uploadCallBack', {fileName: '',showUrl: '',size: 0});
    }
  }
}
</script>

<style type="text/css">
  .dl-upload-box .el-upload {
    border: 1px dashed #d9d9d9;
    background-color: #fbfdff;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .dl-upload-box .el-upload:hover {
    border-color: #409EFF;
  }
  .dl-upload-box .dl-upload-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .dl-upload-content {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
  }
  .dl-upload-content .dl-upload-img {
    width: 100px;
    height: 100px;
    display: block;
  }

  .dl-preview-action {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0, 0, 0, .5);
    transition: opacity .3s;
    cursor: pointer;
    text-align: center;
    line-height: 100px;
  }
  .dl-preview-action .el-icon-zoom-in {
    font-size: 20px;
    margin-right: 15px;
  }
  .dl-preview-action .el-icon-delete {
    font-size: 20px;
  }
  .dl-preview-action:hover {
    opacity: 1;
  }

</style>
